<template>
	<view class="">
		<u-loading-page :loading="isLoading"></u-loading-page>

		<view class="app" v-show="!isLoading">
			<u-gap height="20rpx"></u-gap>
			<view class="content-box u-m-t-0 u-p-40">{{ obj.state | state_text }}</view>
			<!-- 商品 -->
			<view class=" content-box">
				<block v-for="(item, i) in obj.afterCommodity" :key="i">
					<view class=" u-p-20 u-flex">
						<u-image width="160rpx" height="160rpx" :src="item.master"></u-image>
						<view class="u-flex-1  u-m-l-20 u-flex-between">
							<!-- <text class="u-line-2">{{ item.name }}</text> -->
							<u-text :text="item.name" lines="2"></u-text>
							<u-text :text="item.pvs_value_new"></u-text>
						</view>
						<view class="price-div u-flex-column">
							<u-text mode="price" :text="item.sell_price"></u-text>
							<u-text :text="'x' + item.count"></u-text>
						</view>
					</view>
					<u-cell-group :border="false">
						<u-cell :border="false" v-for="(attach, index) in item.attachlist" :title="attach.attach_value">
							<view class="u-flex" slot="right-icon">
								<u-text mode="price" :text="attach.attach_price"></u-text>
								<u-text :text="'x' + attach.num"></u-text>
							</view>
						</u-cell>
					</u-cell-group>
					<u-line></u-line>
				</block>
			</view>
			<!-- 订单信息 -->
			<view class="content-box" v-if="obj.order">
				<u-gap height="20rpx"></u-gap>
				<u-text bold text="订单信息" margin="20rpx"></u-text>
				<u-cell-group :border="false">
					<u-cell :border="false" title="付款方式" :value="obj.order.pay_id"></u-cell>
					<u-cell v-if="obj.order.user" :border="false" title="买家" :value="obj.order.user.nickname"></u-cell>
					<u-cell :border="false" title="配送方式">
						<view class="" slot="right-icon">
							<text class="txt" v-if="obj.order.order_type == 1">快递</text>
							<text class="txt" v-else-if="obj.order.order_type == 2">自提</text>
							<text class="txt" v-else-if="obj.order.order_type == 3">同城</text>
						</view>
					</u-cell>

					<u-cell :border="false" v-if="obj.order.order_type != 1" :title="obj.order.order_type == 2 ? '自提时间:' : '配送时间:'" :value="obj.delivery_time"></u-cell>
					<u-cell :border="false" title="来源">
						<view class="" slot="right-icon">
							<text class="txt" v-if="obj.order.source == 1">微信小程序</text>
							<text class="txt" v-else-if="obj.order.source == 2">微信公众号</text>
							<text class="txt" v-else-if="obj.order.source == 3">H5</text>
						</view>
					</u-cell>
					<u-cell :border="false" title="收货人" :value="obj.order.consignee"></u-cell>
					<u-cell :border="false" title="联系号码" :value="obj.order.iphone"></u-cell>
					<u-cell :border="false" title="收货地址" :value="obj.order.address"></u-cell>
					<u-cell :border="false" title="买家备注" :value="obj.order.remake"></u-cell>
				</u-cell-group>
			</view>
			<!-- 维权信息 -->
			<view class="content-box">
				<u-gap height="20rpx"></u-gap>
				<u-text bold text="维权信息" margin="20rpx"></u-text>
				<u-cell-group :border="false">
					<u-cell :border="false" title="维权类型" :value="obj.type_text"></u-cell>
					<u-cell :border="false" title="维权金额" :value="obj.money"></u-cell>
					<u-cell :border="false" title="维权编号" :value="obj.after_no"></u-cell>
					<u-cell :border="false" title="维权说明" :value="obj.explain"></u-cell>
					<u-cell :border="false" title="维权凭证" v-if="obj.imgs && obj.imgs.length">
						<view class="" slot="right-icon"><u-image v-for="(item, i) in obj.imgs" :src="item" :key="i"></u-image></view>
					</u-cell>
				</u-cell-group>
			</view>
			<view class="content-box" v-if="obj.express_num || obj.deliver_num">
				<u-gap height="20rpx"></u-gap>
				<u-text bold text="买家退货信息" margin="20rpx"></u-text>
				<u-cell-group :border="false">
					<u-cell :border="false" title="快递公司" :value="obj.express_company"></u-cell>
					<u-cell :border="false" title="快递单号" :value="obj.express_num"></u-cell>
					<u-cell :border="false" title="发货时间" :value="obj.return_time"></u-cell>
				</u-cell-group>
			</view>
			<view class="content-box" v-if="obj.deliver_num">
				<text></text>
				<u-gap height="20rpx"></u-gap>
				<u-text bold text="商家发货信息" margin="20rpx"></u-text>
				<u-cell-group :border="false">
					<u-cell :border="false" title="快递公司" :value="obj.deliver_company"></u-cell>
					<u-cell :border="false" title="快递单号" :value="obj.deliver_num"></u-cell>
					<u-cell :border="false" title="发货时间" :value="obj.deliver_time"></u-cell>
				</u-cell-group>
			</view>
			<u-gap height="120rpx"></u-gap>
			<!-- 按钮组 -->
			<view class="footer u-flex u-flex-items-center" v-if="obj.state != 3 && obj.state != 7 && obj.state != 8 && obj.state != 9">
				<u-button type="primary" shape="circle" @click="accessAfter" style="margin-right:10px">处理维权</u-button>
			</view>
		</view>
		<u-popup :show="showAccess" @close="showAccess=false"><afterAccess @close="close" :order="obj" @success="done"></afterAccess></u-popup>
		<lc-fab-touch ref="fab"  horizontal="right" vertical="bottom" direction="horizontal" />
		
	</view>
</template>

<script>
import {mapState, mapMutations} from 'vuex';

import afterAccess from './components/afterAccess';

export default {
	data() {
		return {
			rk: 1,
			accObj: {},
			showAccess: false,
			isLoading: false,
			active: 0,
			orderItemCountPrice: '0.00',
			obj: {
				user:{
					
				}
			}
		};
	},
	computed: {
		...mapState({
			$BasicsUrl: state => state.$BasicsUrl
		})
	},
	components: {
		afterAccess
	},
	onLoad(e) {
		this.id = e.id;
		this.getAfter();
	},
	filters: {
		state_text: function(value) {
			switch (value) {
				case 1:
					return '等待商家处理';
					break;
				case 2:
					return '同意申请';
					break;
				case 3:
					return '驳回申请';
					break;
				case 4:
					return '商家已发货，等待客户收货';
					break;
				case 5:
					return '手动退款';
					break;
				case 6:
					return '确认发货';
					break;
				case 7:
					return '退款退货完成';
					break;
				case 8:
					return '退款完成';
					break;
				case 9:
					return '换货完成';
					break;
				case 10:
					return '退回物品,等待退款';
					break;
				case 11:
					return '同意退款';
					break;
				case 12:
					return '等待买家退回商品';
					break;
				case 13:
					return '买家退回物品，等待退款';
					break;
				case 14:
					return '买家退回物品，等待商家重新发货';
					break;
				default:
					return '状态不明';
					break;
			}
		}
	},
	methods: {
	
		//维权处理结束回调
		done() {
			this.showAccess = false;
			this.getAfter();
		},
		//处理维权
		accessAfter() {
			//console.log(this.obj)
			//this.accObj = {...this.obj};
			this.showAccess = true;
		},
		//获取订单详情数据
		getAfter() {
			this.isLoading = true;
			uni.$u.http
				.get('/shop/aftersale/' + this.id, {custom:{id:10}})
				.then(res => {
					this.isLoading = false;
					let o = res.msg;
					let x = 0;
					o.afterCommodity.forEach(e => {
						if (e.master.indexOf('http') == -1) {
							e.master = this.$BasicsUrl + '/' + e.master;
						}
						//转换处理SKU数据->红+L+大
						if (e.pvs_value) {
							let l = e.pvs_value.split(','),
								s = '';
							l.forEach(k => {
								s += k.split(':')[1] + '+';
							});
							s = s.substring(0, s.length - 1);
							e.pvs_value_new = s;
						}
						//处理小计数据
						e.countPrice = (e.sell_price * e.count).toFixed(2);
						x += e.sell_price * e.count;
					});
					this.orderItemCountPrice = x.toFixed(2);
					//处理进度面板
					let ac = o.process.findIndex(_ => {
						return _.handle_time == null;
					});
					this.active = ac == -1 ? o.process.length : ac;

					this.obj = o;
				})
				.catch(e => {
					this.isLoading = false;
				});
		},
		close(type) {
			this[type] = false;
		}
	}
};
</script>

<style lang="scss">
.content-box {
	margin: 20rpx auto;
}
.footer {
	height: 120rpx;
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	box-sizing: border-box;
}
.price-div {
	width: 160rpx;
}
</style>
